<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
  name: "answer",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      topic: '',
      discuss: {},
      collect: 0,
      shUserId: 0,
    }
  },
  methods: {
    goback() {
      this.$router.back()
    },
    shoucang() {
      if (this.collect !== 0) {
        console.log(this.collect)
        this.$api.deleteCollect({id: this.collect}).then(res => {
          console.log(res)
          this.collect = 0
          if (res.status_code === 1) {
            this.$message({
              message: '操作成功！',
              type: 'success'
            });
            this.checkCollect()
            // this.goback();
          } else {

          }
        })
      } else {
        this.collect = 1
        this.$api.addCollect({discussId: this.discuss.discussId}).then(res => {
          console.log(res)
          if (res.status_code === 1) {
            this.$message({
              message: '操作成功！',
              type: 'success'
            });
            this.checkCollect()
            // this.goback();
          } else {

          }
        })
      }

    },
    shanchu() {
      this.$api.delDiscussById({discussId: this.discuss.discussId}).then(res => {
        console.log(res)
        this.$message({
          message: '操作成功！',
          type: 'success'
        });
        this.goback()
      })
    },
    checkCollect() {
      this.$api.checkCollect({discussId: this.discuss.discussId}).then(response => {
        console.log(response);
        this.collect = response.data == null ? 0 : response.data;
        console.log(this.collect);
      })
    },
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
      }
      return "";
    },
  },
  mounted() {
    let item = this.$route.query.item;
    this.$api.getUserInfo({
      id: item.userId
    }).then(res => {
      item.nickname = res.data.nickname;
      this.shUserId = this.getCookie('shUserId');
      console.log(this.discuss)
      this.discuss = item
      this.checkCollect()
    })
  },
}
</script>

<template>
  <div>
    <app-head></app-head>
    <app-body>
      <div class="container">
        <div style="display: flex;justify-content: space-between;">
          <el-button style="margin: 10px 0" @click="goback()">返回</el-button>
        </div>
        <div class="container" STYLE="display: flex;justify-content: space-between;align-items: center;">
          <h2>{{ this.discuss.topic.topicName }}</h2>
          <h3>作者：<span v-html="this.discuss.nickname"></span></h3>
        </div>
        <div>
          <div v-html="discuss.discussContent"></div>
        </div>
        <!--        <el-button type="primary" @click="handleClose">回答</el-button>-->
        <div style="float: right">
          <el-button v-if="(shUserId==discuss.userId)" style="margin: 10px 0" @click="shanchu()">删除</el-button>
          <el-button style="margin: 10px 0" @click="shoucang()">{{
              this.collect !== 0 ? '取消收藏' : '收藏'
            }}
          </el-button>
        </div>
      </div>
    </app-body>
    <app-foot></app-foot>
  </div>
</template>

<style scoped>
.container {
  width: 80%;
  margin: auto;
}
</style>